/*
 * @Author: 小魏
 * @Date: 2019-09-18 16:56:35
 * @LastEditors  : 小魏
 * @LastEditTime : 2020-01-15 16:07:02
 * @Description:
 */
// components/canvas/index.js
import CanvasDraw from './canvas-draw.js'

let ctx = null
let canvasDraw = null
Component({

  lifetimes: {
    attached: function () {

    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    canvasid: {
      type: String
    },
    options: {
      type: Object,
      observer (obj) {
        if (obj) {
          this.init(obj)
        }
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    canvasWidth: null,
    canvasHeight: null
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init (obj) {
      // 创建Canvas上下文
      this.setData({
        canvasWidth: obj.width,
        canvasHeight: obj.height
      })
      ctx = wx.createCanvasContext(this.data.canvasid, this);
      // canvas 绘制生成图片方法
      canvasDraw = new CanvasDraw({
        canvas: ctx, //  canvas绘制上下文对象
        observer: this, // 当前组件this
        options: { //cnavas类配置参数 宽 高 背景颜色
          width: obj.width,
          height: obj.height,
          bgColor: obj.bgColor
        }
      })
      // 初始化构建画布样式
      canvasDraw.init(() => {
        // 处理既有网络图片又有base64图片的情况
        if (obj.images && obj.base64) {
          const base64 = canvasDraw.base64ImageConversionLocal(obj.base64)
          canvasDraw.imageConversionLocal(obj.images)
            .then(data => drawFn(ctx, canvasDraw,{
              images: data,
              base64
            }))
        }
        // 网络图片转换为本地图片
        if (obj.images && !obj.base64) {
          canvasDraw.imageConversionLocal(obj.images)
            .then(data => drawFn(ctx, canvasDraw, { images: data }))
            .catch(err => console.error(err))
        }
        // base64转换为比本地图片
        if (obj.base64 && !obj.images) {
          const base64 = canvasDraw.base64ImageConversionLocal(obj.base64)
          drawFn(ctx, canvasDraw, { base64 })
        }
        // 处理两种类型图片都没有的情况
        if (!obj.images && !obj.base64) {
          drawFn(ctx, canvasDraw, {})
        }
      })
      // 回调调用方法
      const drawFn = (ctx, canvasDraw, data) => {
        // 调用又页面传入过来的方法 传递canvas实例 ，处理图片数据 ，canvas封装方法实例
        this.triggerEvent('draw', {ctx, canvasDraw, data})
        // 绘制完成回调
        ctx.draw(false, () => {
          //  生成图片完成回调
          canvasDraw.drawImage(this.data.canvasid)
            // 返回会在这里返回一个页面回调方法
            .then(res => this.triggerEvent('confirm', res.tempFilePath))
            // 返回异常
            .catch(err => this.triggerEvent('error', err))
        })
      }
    }
  }
})
